<template>
  <view>
    <view class="edgeInsetTop"></view>
    <view class="page-background"></view>
    <canvas class="qrcode-canvas" canvas-id="qrcode" style="width: 200px; height: 200px" />
    <view class="page-container">
      <view class="content">
        <view class="poster-image"><image v-if="posterSrc" :src="posterSrc" mode="aspectFit"></image></view>
        <canvas
          class="poster-canvas"
          canvas-id="poster"
          :style="{ width: `${postercanvas_width}px`, height: `${postercanvas_height}px` }"
        />
      </view>
    </view>
    <view class="page-foot">
      <view class="template-list">
        <view
          class="template-item"
          v-for="(x, xi) in posterTemplates"
          :key="xi"
          @tap="create(x)"
          :class="{ checked: x.checked }"
          :style="{ width: x.thumbnail_width + 'px' }"
        >
          <image :src="$wanlshop.oss(x.thumbnail_url, 0, 88)" />
        </view>
        <!-- #ifdef H5 -->
        <view class="tips text-sm wanl-gray"> <text class="wlIcon-31tishi"></text>长按图片保存 </view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="tips text-sm wanl-orange" @tap="save()">
          <text class="wlIcon-image margin-right-xs"></text>保存到相册
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import uQRCode from '@/common/uqrcode.js';

import { mapState } from 'vuex';
export default {
  data() {
    return {
      QRCodeText: '',
      QRCodeSrc: '',
      posterSrc: '',
      postercanvas_width: 0, // 画布宽度
      postercanvas_height: 0, // 画布高度
      posterTemplates: [],
      options: {},
    };
  },
  //监听属性
  computed: {
    ...mapState({
      domain: state => state.common.appConfig.domain,
      invitation: state => state.user.invitation,
    }),
  },
  onLoad(option) {
    this.options = option;
  },
  onReady() {
    const option = this.options;
    // 提示
    uni.showLoading({
      title: '二维码生成中',
      mask: false,
    });

    if (option.url) {
      this.QRCodeText = option.url;
      this.loadData();
    } else {
      let interval = setInterval(() => {
        if (this.domain && this.invitation) {
          this.QRCodeText = this.domain + '/?QRtype=user&type=0&cmd=invitation&invitation=' + this.invitation;
          this.loadData();
          clearInterval(interval);
        }
      }, 300);

      // this.QRCodeText = this.$store.state.common.appConfig.domain +'/pages/user/info?id='+ this.$store.state.user.id +'&QRtype=user';
    }
    // console.log(' this.QRCodeText  ========>', this.QRCodeText  , );
  },
  methods: {
    // 二维码配置
    async loadData(option) {
      this.$api.post({
        url: '/wanlshop/common/qrcode',
        success: res => {
          // 下载到本地
          res.forEach((item, index, arr) => {
            if (item.template != 'wanlshopqr') {
              // 远程下载背景
              uni.downloadFile({
                url: this.$wanlshop.oss(item.background_url, 350, 0),
                success: e => {
                  item.background_url = e.tempFilePath;
                },
                fail: res => {
                  uni.hideLoading();
                  uni.showToast({
                    icon: 'none',
                    title: '网络异常，请退出重试',
                  });
                },
              });
              // 远程下载图标
              uni.downloadFile({
                url: this.$wanlshop.oss(item.logo_src, 40, 40),
                success: e => {
                  item.logo_src = e.tempFilePath;
                },
                fail: res => {
                  uni.hideLoading();
                  uni.showToast({
                    icon: 'none',
                    title: '网络异常，请退出重试',
                  });
                },
              });
            }
          });
          // 赋值
          this.posterTemplates = res;
          if (res.length == 0) {
            uni.showModal({
              title: '重要提示',
              content: '平台尚未配置二维码，请到后台系统管理【配置二维码】',
              success: r => {
                this.$wanlshop.back(1);
              },
            });
          } else {
            uni.showLoading({
              title: '加载配置中',
              mask: true,
            });
          }
          // 生成二维码
          uQRCode.make({
            canvasId: 'qrcode',
            text: this.QRCodeText,
            size: 200,
            success: res => {
              this.QRCodeSrc = res;
              // 默认生成第一张海报
              this.create(this.posterTemplates[0]);
            },
          });
        },
      });
    },
    create(posterTemplate) {
      if (posterTemplate.checked) {
        return;
      }
      uni.showLoading({
        title: '海报生成中',
        mask: true,
      });
      this.posterTemplates.forEach(x => {
        x.checked = false;
      });
      posterTemplate.checked = true;

      this.postercanvas_width = posterTemplate.canvas_width;
      this.postercanvas_height = posterTemplate.canvas_height;

      this.posterSrc = '';
      setTimeout(() => {
        switch (posterTemplate.template) {
          case 'wanlshopqrlist001':
            this.wanlshopqrlist001({
              canvasId: 'poster',
              canvas_width: posterTemplate.canvas_width,
              canvas_height: posterTemplate.canvas_height,
              backgroundSrc: posterTemplate.background_url,
              logoSrc: posterTemplate.logo_src,
              name: this.$store.state.user.username,
              text: '长按扫描二维码~',
              QRCodeSrc: this.QRCodeSrc,
              success: res => {
                this.posterSrc = res;
                uni.hideLoading();
              },
            });
            break;
          case 'wanlshopqr':
            this.wanlshopqr({
              canvasId: 'poster',
              canvas_width: posterTemplate.canvas_width,
              canvas_height: posterTemplate.canvas_height,
              QRCodeSrc: this.QRCodeSrc,
              success: res => {
                this.posterSrc = res;
                uni.hideLoading();
              },
            });
            break;
          default:
            uni.hideLoading();
            uni.showToast({
              icon: 'none',
              title: '网络异常，请退出重试',
            });
        }
      }, 100);
    },
    save() {
      uni.saveImageToPhotosAlbum({
        filePath: this.posterSrc,
        success: () => {
          this.$wanlshop.msg('保存成功');
        },
      });
    },
    wanlshopqrlist001(options) {
      try {
        let { canvas_width, canvas_height, backgroundSrc, logoSrc, name, text, QRCodeSrc } = options;
        // 绑定画布
        var ctx = uni.createCanvasContext(options.canvasId);
        // 清除画布
        ctx.clearRect(0, 0, canvas_width, canvas_height);

        // 获取背景图片信息
        let backgroundImageInfo = {
          width: '500',
          height: '667',
        };
        // 设置背景图片宽高
        let backgroundWidth = canvas_width;
        let backgroundHeight = (backgroundImageInfo.height * canvas_width) / backgroundImageInfo.width;
        // 填充背景图片
        ctx.drawImage(backgroundSrc, 0, 0, backgroundWidth, backgroundHeight);
        // 设置标志图片宽高坐标
        let logoWidth = 80;
        let logoHeight = 80;
        let logoX = 36;
        let logoY = backgroundHeight + (canvas_height - backgroundHeight) / 2 - logoHeight / 2;
        // 绘制为圆形标志
        ctx.save();
        ctx.beginPath();
        // 先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
        ctx.arc(logoWidth / 2 + logoX, logoHeight / 2 + logoY, logoWidth / 2, 0, Math.PI * 2, false);
        ctx.closePath();
        // 画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
        ctx.clip();
        // 填充标志图片
        ctx.drawImage(logoSrc, logoX, logoY, logoWidth, logoHeight);
        // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
        ctx.restore();

        // 名称最大长度限制 10，超出为省略号
        if (name.length > 10) {
          name = name.substring(0, 10) + '...';
        }
        // 计算文字定位距离
        let nameX = logoX + logoWidth + 10;
        let nameY = logoY + 32;
        let nameFontSize = 20;
        // 设置名称文字样式
        ctx.setFillStyle('#000000');
        ctx.setFontSize(nameFontSize);
        // 填充名称到画布
        ctx.fillText(name, nameX, nameY);

        // 计算文字定位距离
        let textX = nameX;
        let textY = nameY + 32;
        let textFontSize = 18;
        // 设置分享文案文字样式
        ctx.setFillStyle('#999999');
        ctx.setFontSize(textFontSize);
        // 填充分享文案到画布
        ctx.fillText(text, textX, textY);

        // 设置二维码图片宽高
        let QRCodeWidth = 120;
        let QRCodeHeight = 120;
        // 计算二维码图片定位距离
        let QRCodeX = canvas_width - QRCodeWidth - 36;
        let QRCodeY = backgroundHeight + (canvas_height - backgroundHeight) / 2 - QRCodeHeight / 2;
        // 填充二维码图片
        ctx.drawImage(QRCodeSrc, QRCodeX, QRCodeY, QRCodeWidth, QRCodeHeight);

        // 输出到画布中
        ctx.draw(false, () => {
          // 绘图全部完成后生成文件路径
          uni.canvasToTempFilePath({
            canvasId: options.canvasId,
            fileType: 'jpg',
            success: res => {
              options.success && options.success(res.tempFilePath);
            },
            fail: () => {
              uni.hideLoading();
              uni.showToast({
                icon: 'none',
                title: '网络异常，请退出重试',
              });
            },
          });
        });
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          icon: 'none',
          title: '网络异常，请退出重试',
        });
      }
    },
    wanlshopqr(options) {
      try {
        let { canvas_width, canvas_height, QRCodeSrc } = options;
        // 绑定画布
        let ctx = uni.createCanvasContext(options.canvasId);
        // 清除画布
        ctx.clearRect(0, 0, canvas_width, canvas_height);
        // 填充二维码图片，并设置边距
        ctx.drawImage(QRCodeSrc, 15, 15, canvas_width - 30, canvas_height - 30);
        // 输出到画布中
        ctx.draw(false, () => {
          uni.hideLoading();
          // 绘图全部完成后生成文件路径
          uni.canvasToTempFilePath({
            canvasId: options.canvasId,
            fileType: 'jpg',
            success: res => {
              options.success && options.success(res.tempFilePath);
            },
            fail: () => {
              uni.hideLoading();
              uni.showToast({
                icon: 'none',
                title: '网络异常，请退出重试',
              });
            },
          });
        });
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          icon: 'none',
          title: '网络异常，请退出重试',
        });
      }
    },
  },
};
</script>

<style>
.page-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #f1f1f1;
}

.page-container {
  position: relative;
  z-index: 20;
}

.qrcode-canvas {
  position: fixed;
  right: 100vw;
  bottom: 100vh;
  z-index: -999;
}

.content {
  width: 100%;
  height: calc(100vh - 44px - 150px);
  overflow-y: scroll;
}

.poster-image {
  width: 100%;
  height: 100%;
  min-height: 500rpx;
  padding: 80rpx;
  box-sizing: border-box;
}

.poster-image image {
  width: 100%;
  height: 100%;
}

.poster-canvas {
  position: fixed;
  right: 100vw;
  bottom: 100vh;
}

.page-foot {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background-color: #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom);
}

.template-list {
  display: flex;
  position: relative;
  height: 100px;
}
.template-list .tips {
  position: absolute;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  top: -60rpx;
  width: 100%;
}
.template-list .tips .wlIcon-31tishi {
  font-size: 32rpx;
}
.template-item {
  position: relative;
  height: 88px;
  margin: 6px 0 6px 6px;
}

.template-item::before {
  content: '';
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.template-item.checked::before {
  border: 2px solid #44aa33;
}

.template-item image {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
